import React from 'react'
import PropTypes from 'prop-types'
import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../redux/constants/TodoFilters'
import classnames from 'classnames'

const FILTER_TITLES = {
    [SHOW_ALL]: 'All',
    [SHOW_ACTIVE]: 'Active',
    [SHOW_COMPLETED]: 'Completed'
}

const Footer = (props) => {
    const { activeCount, completedCount, onClearCompleted, onFilter, filterType } = props
    const itemWord = activeCount === 1 ? 'item' : 'items'
    return (
        <footer className="footer">
            <span className="todo-count">
                <strong>{activeCount || 'No'}</strong> {itemWord} left
            </span>
            <ul className="filters">
                {Object.keys(FILTER_TITLES).map((filter) => {
                    return (
                        <li key={filter}>
                            <a
                                className={classnames({ selected: filterType === filter})}
                                style={{ cursor: 'pointer' }}
                                onClick={() => onFilter(filter)}
                            >
                                {FILTER_TITLES[filter]}
                            </a>
                        </li>
                    )}
                )}
            </ul>
            {
                !!completedCount &&
                <button
                    className="clear-completed"
                    onClick={onClearCompleted}
                >Clear completed</button>

            }
        </footer>
    )
}

Footer.propTypes = {
    completedCount: PropTypes.number.isRequired,
    activeCount: PropTypes.number.isRequired,
    onClearCompleted: PropTypes.func.isRequired,
    onFilter: PropTypes.func.isRequired,
    filterType: PropTypes.string.isRequired,
}

export default Footer